<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Combo Chart</h1>
        <p>Different chart types can be combined in the same graph.</p>
    </div>
    <app-demoActions github="chart/combochart"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-chart type="bar" [data]="data" [options]="chartOptions"></p-chart>
    </div>
</div>

<div class="content-section documentation">


    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/chart/combochart" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-chart type="bar" [data]="data" [options]="chartOptions"&gt;&lt;/p-chart&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class ComboChartDemo &#123;

    data: any;

    chartOptions: any;

    subscription: Subscription;

    config: AppConfig;

    constructor(private configService: AppConfigService) &#123;&#125;

    ngOnInit() &#123;
        this.data = &#123;
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [&#123;
                type: 'line',
                label: 'Dataset 1',
                borderColor: '#42A5F5',
                borderWidth: 2,
                fill: false,
                data: [
                    50,
                    25,
                    12,
                    48,
                    56,
                    76,
                    42
                ]
            &#125;, &#123;
                type: 'bar',
                label: 'Dataset 2',
                backgroundColor: '#66BB6A',
                data: [
                    21,
                    84,
                    24,
                    75,
                    37,
                    65,
                    34
                ],
                borderColor: 'white',
                borderWidth: 2
            &#125;, &#123;
                type: 'bar',
                label: 'Dataset 3',
                backgroundColor: '#FFA726',
                data: [
                    41,
                    52,
                    24,
                    74,
                    23,
                    21,
                    32
                ]
            &#125;]
        &#125;;

        this.chartOptions =  &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;;

        this.config = this.configService.config;
        this.updateChartOptions();
        this.subscription = this.configService.configUpdate$.subscribe(config =&gt; &#123;
            this.config = config;
            this.updateChartOptions();
        &#125;);
    &#125;

    updateChartOptions() &#123;
        if (this.config.dark)
            this.applyDarkTheme();
        else
            this.applyLightTheme();
    &#125;

    applyLightTheme() &#123;
        this.chartOptions = &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;,
                y: &#123;
                    ticks: &#123;
                        color: '#495057'
                    &#125;,
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;
    &#125;

    applyDarkTheme() &#123;
        this.chartOptions = &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                x: &#123;
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;,
                y: &#123;
                    ticks: &#123;
                        color: '#ebedef'
                    &#125;,
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;
            &#125;
        &#125;;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
    </p-tabView>
</div>
